<template>
  <div style="background-color: #fff; padding-bottom: 1rem">
    <div>
      <el-form inline size="small">
        <el-form-item label="公司名称">
          <el-input
            v-model.trim="dataParams.companyName"
            clearable
            placeholder="公司名称"
            @keyup.enter.native="getDataList"
          />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateTimeRange"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :clearable="false"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click.native.prevent="getDataList" />
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#FAFBFD', color: '#6D6D6D'}"
      style="width: 100%; margin-bottom: 3rem;"
      border
      size="medium"
      show-summary
    >
      <el-table-column
        v-for="(item, index) in tableTitles"
        :index="index"
        :key="index"
        :prop="item.name"
        :label="item.title"
        align="center"
        :sortable="item.sortable"
      />
    </el-table>
  </div>
</template>

<script>
import { jsonToParams } from '@/utils'

const startTime = (new Date()).getFullYear() + '-' + ((new Date()).getMonth() + 1) + '-' + (new Date()).getDate()
const endTime = (new Date()).getFullYear() + '-' + ((new Date()).getMonth() + 1) + '-' + (new Date()).getDate()
export default {
  name: 'Index',
  props: {
    dataSource: {
      type: Function, default: () => {
      }
    }
  },
  data() {
    return {
      tableTitles: [
        {
          title: '公司名称',
          name: 'CompanyName'
        },
        {
          title: '用户总数',
          name: 'UserCount',
          sortable: true
        },
        {
          title: '登入次数',
          name: 'LoginCount',
          sortable: true
        },
        {
          title: '登出次数',
          name: 'LogoutCount',
          sortable: true
        }
      ],
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dateTimeRange: [startTime, endTime],
      dataParams: {
        companyName: '',
        fLogDate: startTime,
        tLogDate: endTime
      }
    }
  },
  watch: {
    // 监听对象temp，
    dataParams: {
      handler(newVal) {
        this.getDataList()
      },
      deep: true
    },
    dateTimeRange: {
      handler(newVal) {
        console.log('new val', newVal)
        if (newVal === null) {
          this.dateTimeRange = newVal = [startTime, endTime]
        }

        this.dataParams.fLogDate = newVal[0]
        this.dataParams.tLogDate = newVal[1]
      },
      deep: true
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataSource()(jsonToParams(this.dataParams)).then(res => {
        if (res.statusCode === 200) {
          this.tableData = res.data
        }
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return rowIndex === 0 ? [row.Count, 1] : [0, 0]
      }
    }
  }
}
</script>

<style scoped>

</style>
